<template>
  <div id="processConfigure">
    <div class="processConfigureTree">
      <el-input
        style="width: 80%; margin-left: 10%"
        placeholder="输入关键词进行过滤"
        v-model="filterText"
      >
      </el-input>

      <el-tree
        class="filter-tree"
        :data="renderData"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
        :render-content="renderContent"
        :highlight-current="true"
      >
      </el-tree>
    </div>
    <div class="processConfigureFrom">
      <div style="width: 100%; margin-top: 5px; height: 33%">
        <h1>固定分派</h1>
        <div class="flex" style="margin-bottom: 5px">
          <el-switch
            style="display: block; margin-top: 4px; margin-right: 1rem"
            v-model="fixAssignBtn"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="开"
            inactive-text=""
            :active-value="true"
            :inactive-value="false"
            @change="changeBtn(0, fixAssignBtn)"
            :disabled="fixAssignBtn == true"
          >
          </el-switch>
          <el-button size="mini" type="primary" @click="editDialog('新增固定分派')"
            >新增</el-button
          >
        </div>
        <el-table
          :data="fixAssignData"
          border
          size="mini"
          style="width: 95%; margin: 0 auto"
          height="75%"
        >
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="userName" label="账号" align="center"> </el-table-column>
          <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: red"
                @click="deleteHandler(1, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="width: 100%; margin-top: 5px; height: 33%">
        <h1>手工指派</h1>
        <div class="flex" style="margin-bottom: 5px">
          <el-switch
            style="display: block; margin-top: 4px; margin-right: 1rem"
            v-model="manualBtn"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="开"
            inactive-text=""
            :active-value="true"
            :inactive-value="false"
            @change="changeBtn(1, manualBtn)"
            :disabled="manualBtn == true"
          >
          </el-switch>
          <el-button size="mini" type="primary" @click="editDialog('新增手工指派')"
            >新增</el-button
          >
        </div>
        <el-table
          :data="manualData"
          border
          size="mini"
          style="width: 95%; margin: 0 auto"
          height="75%"
        >
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="userName" label="账号" align="center"> </el-table-column>
          <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: red"
                @click="deleteHandler(1, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="width: 100%; margin-top: 5px; height: 30%; display: none">
        <h1>权限配置</h1>
        <div class="flex" style="margin-bottom: 5px">
          <el-switch
            style="display: block; margin-top: 4px; margin-right: 1rem"
            v-model="limitsBtn"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="开"
            inactive-text=""
            :active-value="true"
            :inactive-value="false"
            @change="changeBtn(2, limitsBtn)"
            :disabled="limitsBtn == true"
          >
          </el-switch>
          <el-button size="mini" type="primary" @click="editDialog('新增权限配置')"
            >编辑</el-button
          >
        </div>
        <el-table
          :data="limitsData"
          border
          size="mini"
          style="width: 95%; margin: 0 auto"
          height="75%"
        >
          <el-table-column type="index" label="序号" width="100" align="center" />
          <el-table-column prop="resourceName" label="权限名称" align="center">
          </el-table-column>
          <el-table-column prop="code" label="权限编码" align="center"> </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="color: red"
                @click="deleteHandler(2, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      :title="editTiele"
      :visible.sync="editDialogStatus"
      width="30%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-if="editTiele == '新增固定分派'">
        <span> 固定分派人员 </span>
        <el-select style="width: 100%" v-model="optionValue" placeholder="请选择">
          <el-option
            v-for="item in EnableUserData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div v-if="editTiele == '新增手工指派'">
        <span> 手动指派人员 </span>
        <el-select style="width: 100%" v-model="optionValue" placeholder="请选择">
          <el-option
            v-for="item in EnableUserData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div v-if="editTiele == '新增权限配置'">
        <el-tree
          ref="tree"
          :data="approveData"
          show-checkbox
          node-key="id"
          class="resourceIdListTree"
          :default-expanded-keys="[999]"
          style="height: 300px; overflow: auto"
        >
        </el-tree>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogStatus = false">取 消</el-button>
        <el-button type="primary" @click="editSaveHandler('from')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  deployProcess,
  getProConfigTree,
  updateProConfig,
  deleteAuthority,
  getProStateAuthorityVo,
  saveAuthority,
  deletePrepare,
  getProStatePrepareVo,
  savePrepare,
  updatePrepare,
} from "/src/http/backstageManage/sysMg/processConfigure/processConfigure.js";
import { getEnableUser } from "/src/http/inTellingSchedule/scheduleCommand.js";
import { getDataDictByType } from "/src/http/backstageManage/sysMg/dictionaryMg/dictionaryMg.js";
import { getResTree } from "/src/http/backstageManage/sysMg/resMg/resMg.js";
export default {
  data() {
    return {
      filterText: "",
      renderData: null,
      defaultProps: {
        children: "children",
        label: "name",
      },
      select: "",
      editDialogStatus: false,
      editTiele: "",
      //固定分派
      fixAssignBtn: false,
      fixAssignData: [],
      //手动分派
      manualBtn: false,
      manualData: [],
      //权限管理
      limitsBtn: false,
      limitsData: [],
      //用户列表
      EnableUserData: [],
      approveData: [],
      optionValue: "",
      updateId: null,
      //所有的Pid
      PIds: [],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.getListApi();
    this.getEnableUser();
    this.getDataDictByType();

    console.log(this.defaultProps);
  },

  methods: {
    //检索
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 自定义树形控件内容
    renderContent(h, { node, data, store }) {
      if (data.assignWay == null) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
          </span>
        );
      } else {
        return (
          <span class="custom-tree-node" on-click={() => this.getConfigure(data)}>
            <span>{node.label}</span>
          </span>
        );
      }
    },
    getEnableUser() {
      getEnableUser().then((res) => {
        if (res.code == 200) {
          this.EnableUserData = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getDataDictByType() {
      getResTree().then((res) => {
        if (res.code == 200) {
          this.PIds = [];
          this.arrForEach2(res.data);

          this.approveData = res.data;
          console.log(this.approveData);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 新增
    editSaveHandler() {
      if (!this.updateId) {
        this.$message.error("请先点击左侧审批流程旁的配置按钮");
        return;
      }
      let params;
      switch (this.editTiele) {
        case "新增固定分派":
          params = {
            stateId: this.updateId.id,
            type: 0,
            userId: this.optionValue,
          };
          savePrepare(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功!",
              });
              this.editDialogStatus = false;
              this.getConfigure(this.updateId);
            } else {
              this.$message.error(res.message);
            }
          });
          break;
        case "新增手工指派":
          params = {
            stateId: this.updateId.id,
            type: 1,
            userId: this.optionValue,
          };
          savePrepare(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功!",
              });
              this.editDialogStatus = false;
              this.getConfigure(this.updateId);
            } else {
              this.$message.error(res.message);
            }
          });
          break;
        case "新增权限配置":
          // const c = this.$refs.tree
          //   .getCheckedKeys()
          //   .filter((element) => !this.PIds.includes(element));
          let arr = [];
          console.log(this.$refs.tree.getCheckedNodes());
          this.$refs.tree.getCheckedNodes().forEach((item) => {
            if (!item.children) {
              arr.push(item.id);
            }
          });

          console.log(arr);
          // console.log(c);

          params = {
            stateId: this.updateId.id,
            resourceIdList: arr,
          };
          saveAuthority(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功!",
              });
              this.editDialogStatus = false;
              this.getConfigure(this.updateId);
            } else {
              this.$message.error(res.message);
            }
          });
          break;
        default:
          break;
      }
    },
    /**接口 */
    // 查询项目列表
    getListApi() {
      getProConfigTree().then((res) => {
        if (res.code == 200) {
          this.arrForEach(res.data);
          this.renderData = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    arrForEach(arr) {
      arr.forEach((item) => {
        if (item.children) {
          this.arrForEach(item.children);
        } else {
          if (item.stateList && item.stateList.length > 0) {
            item.children = item.stateList;
          }
        }
      });
    },
    arrForEach2(arr) {
      arr.forEach((item) => {
        item.value = item.id;
        item.label = item.name;
        if (item.children) {
          this.arrForEach2(item.children);
          this.PIds.push(item.id);
        }
      });
    },
    getConfigure(data) {
      console.log(data);

      switch (data.assignWay) {
        case 0:
          this.fixAssignBtn = true;
          this.manualBtn = false;
          this.limitsBtn = false;
          break;
        case 1:
          this.fixAssignBtn = false;
          this.manualBtn = true;
          this.limitsBtn = false;
          break;
        case 2:
          this.fixAssignBtn = false;
          this.manualBtn = false;
          this.limitsBtn = true;
          break;
        default:
          break;
      }

      getProStateAuthorityVo(data).then((res) => {
        if (res.code == 200) {
          this.updateId = data;
          this.limitsData = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
      getProStatePrepareVo(data).then((res) => {
        if (res.code == 200) {
          this.manualData = res.data.manual;
          this.fixAssignData = res.data.builtIn;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //删除
    deleteHandler(type, v) {
      console.log("delete::: ", v);
      this.$confirm("此操作将删除该配置项?", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          switch (type) {
            case 1:
              deletePrepare({ idList: [v.id] }).then((res) => {
                if (res.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getConfigure(this.updateId);
                } else {
                  this.$message.error(res.message);
                }
              });
              break;
            case 2:
              deleteAuthority({ idList: [v.id] }).then((res) => {
                if (res.code === 200) {
                  this.$message({
                    type: "success",
                    message: "删除成功!",
                  });
                  this.getConfigure(this.updateId);
                } else {
                  this.$message.error(res.message);
                }
              });
              break;

            default:
              break;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editDialog(name) {
      if (!this.updateId) {
        this.$message.error("请先点击左侧审批流程旁的配置按钮");
        return;
      }
      this.editDialogStatus = true;
      this.optionValue = null;
      this.editTiele = name;
      if (name == "新增权限配置") {
        let arr = [];
        this.limitsData.forEach((item) => {
          arr.push(item.resourceId);
        });
        setTimeout(() => {
          this.$refs.tree.setCheckedKeys(arr);
        }, 200);
        console.log(arr);
      }
    },
    changeBtn(num, btn) {
      if (!this.updateId) {
        this.$message.error("请先点击左侧审批流程旁的配置按钮");
        switch (num) {
          case 0:
            this.fixAssignBtn = !this.fixAssignBtn;
            break;
          case 1:
            this.manualBtn = !this.manualBtn;
            break;
          case 2:
            this.limitsBtn = !this.limitsBtn;
            break;
          default:
            break;
        }
        return;
      }

      let params = {
        id: this.updateId.id,
        assignWay: num,
        configId: this.updateId.configId,
        state: this.updateId.state,
        name: this.updateId.name,
      };

      updatePrepare(params).then((res) => {
        if (res.code == 200) {
          // this.getConfigure(this.updateId);
          this.getListApi();

          this.$message({
            type: "success",
            message: "配置成功!",
          });

          switch (num) {
            case 0:
              this.fixAssignBtn = true;
              this.manualBtn = false;
              this.limitsBtn = false;
              this.updateId.assignWay = 0;
              break;
            case 1:
              this.fixAssignBtn = false;
              this.manualBtn = true;
              this.limitsBtn = false;
              this.updateId.assignWay = 1;
              break;
            case 2:
              this.fixAssignBtn = false;
              this.manualBtn = false;
              this.limitsBtn = true;
              this.updateId.assignWay = 2;
              break;
            default:
              break;
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#processConfigure {
  display: flex;
  justify-content: space-between;

  height: 100%;
  .processConfigureTree {
    padding-top: 1rem;
    width: 25%;
    height: 100%;
    background: #fff;
  }
  .processConfigureFrom {
    width: 73%;
    height: 100%;
    background: #fff;
    padding: 1rem 2rem;
    h1 {
      font-size: 20px;
    }
  }

  :deep(.custom-tree-node) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  :deep(.el-table .el-table__cell) {
    padding: 0px 0;
  }
}
</style>
